<template>
  <div>
    <input type="button" @click="addMarker" class="btn" value="add">
    <input type="button" @click="openInfo" class="btn" value="open">
    <input type="button" @click="removeMarker" class="btn" value="remove">

    <div id="container"></div>
  </div>

</template>

<script>
var map, marker, infoWindow
import AMap from 'AMap';

export default {
  name: 'HelloWorld2',
  mounted() {
    // eslint-disable-next-line no-unused-vars
    map = new AMap.Map('container', {
      zoom: 15,
      expandZoomRange: true,
      zooms: [4, 18],//设置地图级别范围
      center: [121.24547, 30.158781],//lat,lon
      // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
      pitch: 30, // 地图俯仰角度，有效范围 0 度- 83 度
      viewMode: '3D',// 地图模式
      resizeEnable: true,//这个好像有问题,自动定位

    });
  },
  data() {
    return {}
  },
  methods: {
    addMarker() {
      marker = new AMap.Marker({
        // position: [121.24547, 30.158781]
        position: [121.24547, 30.168781]
      })
      map.add(marker)
      this.addInfoWindow()
    },
    removeMarker() {
      map.remove(marker)
      infoWindow.close();
    },
    addInfoWindow() {
      var info = [];
      info.push("<div> ");
      info.push("<div style=\"padding:0px 0px 0px 0px;\">高德软件");
      info.push("电话 : 010-84107000   邮编 : 100102");
      info.push("地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>");
      infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -40),
        anchor: 'bottom-center',
        content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
      });

      var onMarkerClick = function (e) {
        infoWindow.open(map, e.target.getPosition());//打开信息窗体
        //e.target就是被点击的Marker
      }

      marker.on('click', onMarkerClick);//绑定click事件
      map.on('click', this.closeInfo);

    },

    openInfo(){
     infoWindow.open(map,marker.getPosition())
    },
    closeInfo() {
      infoWindow.close();
    },

}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


* {
  padding: 0;
  margin: 0;
}

#container {
  //margin: 30px auto;
  //width: 500px;
  //height: 500px;
  width: 100vw;
  height: 100vh;
}

.btn {
  width: 100px;
  height: 100px;
}


</style>
